<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ include file="/WEB-INF/jsp/component/common.jsp" %>
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge" ></meta>
    <title>日志信息</title>
    <link rel="stylesheet" href="${frames}/css/lib/bootstrap.min.css" type="text/css" type="text/css">
    <link rel="stylesheet" href="${frames}/css/lib/bootstrap-datetimepicker.min.css" type="text/css">
    <link rel="stylesheet" href="${frames}/css/lib/dataTables.bootstrap.css" type="text/css">
    <link rel="stylesheet" href="${frames}/css/paginate.css" type="text/css">
    <link rel="stylesheet" href="${newframe}/css/base/base.css" type="text/css">
    <link rel="stylesheet" href="${frames}/css/table.css" type="text/css">
    <link rel="stylesheet" href="${frames}/css/qulitity.css" type="text/css" type="text/css">
    <link rel="stylesheet" href="${frames}/css/picker.css" type="text/css">
   	<%@ include file="/WEB-INF/jsp/component/commonBottom.jsp" %>
   	<script>
	   
   	</script>
</head>
<body>
<div class="wrap">
    <div class="page-header">
        <!-- /.page-header -->
        <ul class="page_nav">
            <li class="first cur">美康租赁平台&nbsp;&nbsp;&nbsp;&nbsp;&gt;&nbsp;&nbsp;&nbsp;&nbsp;</li>
            <li class="cur">日志管理&nbsp;&nbsp;&nbsp;&nbsp;&gt;&nbsp;&nbsp;&nbsp;&nbsp;</li>
            <li>日志查询</li>
        </ul>
    </div>
    <div class="form" style="height:50px;">
        <label style="float: left">用户名:</label>
        <input id="username" type="text" class="SN" placeholder="SN" style="float: left">
        <div id="date" style="float: left">
	        <div class="form-group">
	            <label>操作时间:</label>
	            <div id="PrevTime" class="input-group date form_date" style="width: 106px"  data-date-format="yyyy-mm-dd">
	                <input id="prevTime" class="form-control" type="text" readonly style="text-indent:0">
	                <span class="input-group-addon">
	                    <span class="glyphicon-calendar">&gt;</span>
	                </span>
	            </div>
	        </div>
	        <div class="form-group">
	            <label class="To">到</label>
	            <div id="NextTime" class="input-group date form_date" style="width: 106px" data-date-format="yyyy-mm-dd">
	                <input id="overTime" class="form-control" type="text"  readonly style="text-indent:0">
	                <span class="input-group-addon">
	                    <span class="glyphicon-calendar">&gt;</span>
	                </span>
	            </div>
	        </div>
   		</div>
        
        <input id="query" type="button" value="搜索" class="search" onclick="refreshTable();" style="float: left">
        <span class="clear" style="float: left" onclick="cleanForm()">清除条件</span>
    </div>
    <div id="tablepart">
        <table id="example" class="display" cellspacing="10" width="100%" style="table-layout:fixed;">
            <thead>
            <tr>
                <th>用户名</th>
                <th>用户操作</th>
                <th>参数</th>
                <th>ip地址</th>
                <th>创建时间</th>
            </tr>
            </thead>
        </table>
    </div>
</div>
<script>
var table;
function initTable() {
   table = $('#example').DataTable({
   	"bFilter": false,//去掉搜索框
       "bAutoWidth": false, //自适应宽度
       "sPaginationType" : "full_numbers",
       "ordering": false,//是否允许Datatables开启排序
       "aLengthMenu":[10, 20, 50],
       "bProcessing" : true,
       "bServerSide" : true,
       "sAjaxSource":"${URL_LOG_SEARCHLOG}",
       "sAjaxDataProp": "dataList",//查询后，返回的集合
       "fnServerData": function ( sSource, aoData, fnCallback ) {  //查询条件
           aoData.push(
                   { "name": "username", "value": $("#username").val() },
                   { "name": "prevTime", "value": $("#prevTime").val() },
                   { "name": "overTime", "value": $("#overTime").val() }
           );
           $.ajax( {
             "dataType": 'json',
             "url": sSource,
             "type":'post',
             "data": aoData,
             "success": fnCallback
           } );

        },
       "aoColumns" : [{
           "mDataProp" : "username",
           "sWidth": "10%"
         },{
           "mDataProp" : "operation",
           "sWidth": "10%"
         }, {
           "mDataProp" : "event",
           "sWidth": "50%"
         }, {
           "mDataProp" : "ip",
           "sWidth": "10%"
         }, {
           "mDataProp" : "createDate",
           "sWidth": "10%"
         }],
       "createdRow": function ( row, data, index ) {
           $('td', row).eq(0).addClass('border_left');
           $('td', row).eq(5).addClass('border_right');
           $('td', row).addClass('table_td_long');
       },
       "fnInitComplete": function(oSettings, json) {  
    	    $('#example tr td').each(function(){
    	    	$(this).attr('title', $(this).text());
    	    });
       } ,
       "oLanguage": {//插件的汉化
           "sLengthMenu": "每页显示 _MENU_ 条记录",
           "sZeroRecords": "抱歉， 没有找到",
           "sInfo": "当前显示 _START_ 到 _END_条 ,共 _TOTAL_ 条记录",
           "sInfoEmpty": "没有数据",
           "sInfoFiltered": "(从 _MAX_ 条数据中检索)",
           "oPaginate": {
               "sFirst": "首页",
               "sPrevious": "上一页",
               "sNext": "下一页",
               "sLast": "末页"
           },
           "sZeroRecords": "没有检索到数据",
           "sProcessing": "<img src='' />",
           "sSearch": "搜索"
       }
   } );
 }
$(document).ready(function() {
    initTable();
    initDateTime("#NextTime");
	initDateTime("#PrevTime");
    $('#example tr th').eq(0).addClass('border_left');
    $('#example tr th').eq(5).addClass('border_right');
    $('#example tbody tr td').addClass('active');
    $('#example tr td').eq(5).addClass('border_right');
    $('#example_paginate').parent().addClass('pagewidth');
    $('#example_info').parent().addClass('showPage');
    $('#example_length').parent().addClass('pageNow');
    $('#example tr td').attr('title','111');
});

/* //刷新table数据
function refreshTable(){
	 table.ajax.reload(null);
} */
function initDateTime(id){
    $(id).datetimepicker({
        language:  'zh-CN',
        weekStart:  0,
        todayBtn: true,
        autoclose:  1,
        todayHighlight: 1,
        startView: 2,
        minView: 2,
        forceParse: 0
    });
}
</script>
</body>
</html>